<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我独特的生命节奏 - 2025-07-06</title>
    <style>
        /* 引入优雅的中文在线字体 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap');

        /* CSS 变量：用于统一主题，便于维护和修改 */
        :root {
            --font-family-base: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
            --primary-color: #2c3e50; /* 深蓝灰色，沉稳 */
            --secondary-color: #34495e; /* 稍浅的蓝灰色 */
            --accent-color: #4CAF50; /* 沉稳的绿色，代表成长与和谐 */
            --accent-color-light: #e8f5e9; /* 浅绿色，用于高亮状态 */
            --text-color: #333;
            --light-text-color: #f8f9fa; /* 用于深色背景上的文字 */
            --card-bg: rgba(255, 255, 255, 0.8); /* 卡片背景，带透明度 */
            --card-border: rgba(255, 255, 255, 0.5); /* 卡片边框颜色 */
            --shadow-color: rgba(0, 0, 0, 0.1);
            --border-radius: 12px;
            --spacing-unit: 1rem;
        }

        /* 全局重置与基础样式 */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 16px; /* 根字体大小，便于rem单位计算和无障碍缩放 */
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family-base);
            color: var(--text-color);
            line-height: 1.8;
            background-color: #f4f7f6;
            /* 使用Unsplash的公开图片作为背景，并添加一层半透明渐变以增强文本可读性 */
            background-image: linear-gradient(rgba(244, 247, 246, 0.8), rgba(244, 247, 246, 0.95)), url('https://images.unsplash.com/photo-1500964757637-c85e8a162699');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* 固定背景，滚动时更有层次感 */
            display: flex;
            justify-content: center;
            padding: calc(var(--spacing-unit) * 2);
            min-height: 100vh;
        }

        /* 主内容容器 */
        .container {
            width: 100%;
            max-width: 800px;
            animation: fadeIn 1s ease-in-out; /* 页面加载时的淡入动画 */
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 页面头部 */
        .page-header {
            text-align: center;
            margin-bottom: calc(var(--spacing-unit) * 2.5);
            color: var(--primary-color);
        }

        .page-header__title {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .page-header__date {
            font-size: 1.1rem;
            color: var(--secondary-color);
            font-weight: 300;
        }

        /* 主体内容网格布局 */
        .main-content {
            display: grid;
            gap: calc(var(--spacing-unit) * 2);
        }

        /* 卡片样式（玻璃拟态效果） */
        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            border: 1px solid var(--card-border);
            padding: calc(var(--spacing-unit) * 2);
            box-shadow: 0 8px 24px var(--shadow-color);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
        }

        .card__title {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: var(--spacing-unit);
            border-left: 4px solid var(--accent-color);
            padding-left: var(--spacing-unit);
        }

        .card__description {
            margin-bottom: calc(var(--spacing-unit) * 1.5);
            color: var(--secondary-color);
        }

        /* 文本输入区域样式 */
        .card__textarea {
            width: 100%;
            min-height: 120px;
            padding: var(--spacing-unit);
            font-family: var(--font-family-base);
            font-size: 1rem;
            line-height: 1.7;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.9);
            resize: vertical;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .card__textarea:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px var(--accent-color-light);
        }

        /* 引用文本样式 */
        .card__quote {
            border-left: 3px solid #ccc;
            padding-left: calc(var(--spacing-unit) * 1.5);
            margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
            font-style: italic;
            color: #555;
        }

        /* 节奏选择器样式 */
        .rhythm-selector {
            display: flex;
            gap: var(--spacing-unit);
            margin-bottom: calc(var(--spacing-unit) * 1.5);
        }

        .rhythm-selector__button {
            flex-grow: 1;
            padding: 0.8rem 1rem;
            font-family: var(--font-family-base);
            font-size: 1rem;
            font-weight: 500;
            border: 2px solid #ccc;
            border-radius: 8px;
            background-color: transparent;
            color: var(--secondary-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .rhythm-selector__button:hover {
            border-color: var(--accent-color);
            background-color: var(--accent-color-light);
        }

        .rhythm-selector__button.selected {
            background-color: var(--accent-color);
            color: var(--light-text-color);
            border-color: var(--accent-color);
            font-weight: 700;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }

        /* 响应式设计：针对移动设备优化 */
        @media (max-width: 768px) {
            body {
                padding: var(--spacing-unit);
            }
            .page-header__title {
                font-size: 2.2rem;
            }
            .card__title {
                font-size: 1.4rem;
            }
            .rhythm-selector {
                flex-direction: column; /* 在小屏幕上，按钮垂直排列 */
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <header class="page-header" role="banner">
            <h1 class="page-header__title">我独特的生命节奏</h1>
            <p class="page-header__date"></p>
        </header>

        <main class="main-content" role="main">
            <!-- 第一个引导词 -->
            <section class="card" id="rhythm-identity" aria-labelledby="rhythm-identity-title">
                <h2 class="card__title" id="rhythm-identity-title">引导词 1：我的节奏画像</h2>
                <p class="card__description">你觉得自己是一个“快节奏”还是“慢节奏”的人？请选择你的倾向，并写下它在哪些事情上体现出来。</p>
                <div class="rhythm-selector" role="radiogroup" aria-labelledby="rhythm-identity-title">
                    <button class="rhythm-selector__button" role="radio" aria-checked="false" data-rhythm="fast">🚀 快节奏</button>
                    <button class="rhythm-selector__button" role="radio" aria-checked="false" data-rhythm="slow">🐢 慢节奏</button>
                </div>
                <label for="rhythm-details" class="sr-only">具体体现</label>
                <textarea id="rhythm-details" class="card__textarea" placeholder="例如：我吃饭很快，走路也像一阵风，习惯同时处理多项任务... / 我喜欢慢慢品尝食物，享受散步的过程，一次只专注一件事..."></textarea>
            </section>

            <!-- 第二个引导词 -->
            <section class="card" id="rhythm-pressure" aria-labelledby="rhythm-pressure-title">
                <h2 class="card__title" id="rhythm-pressure-title">引导词 2：来自外界的期待</h2>
                <p class="card__description">社会或他人对“理想节奏”的期待，曾给你带来过怎样的压力？你是否为此压抑过自己天然的节奏？</p>
                <blockquote class="card__quote">
                    <p>“你所承受的压力，源于你对事物的渴望... 人生的每一站都有其独特的风景，每一个年纪都有它独特的滋味... 你的花期自会来到。”</p>
                </blockquote>
                <label for="pressure-details" class="sr-only">压力的具体描述</label>
                <textarea id="pressure-details" class="card__textarea" placeholder="记录那些因外界期待而感到焦虑或压抑的时刻。例如，家人催促我找一份“稳定”的工作，但我内心渴望的是自由创作..."></textarea>
            </section>

            <!-- 第三个引导词 -->
            <section class="card" id="rhythm-acceptance" aria-labelledby="rhythm-acceptance-title">
                <h2 class="card__title" id="rhythm-acceptance-title">引导词 3：拥抱我的节奏</h2>
                <p class="card__description">拥抱并赞美你自己的生命节奏。写下你的节奏带给你的三个好处，以及你将如何更好地尊重它。</p>
                <label for="acceptance-details" class="sr-only">拥抱节奏的具体想法</label>
                <textarea id="acceptance-details" class="card__textarea" placeholder="1. 好处一：[例如：慢节奏让我能更深入地思考问题，做出更明智的决策。]\n2. 好处二：[例如：快节奏让我充满活力，抓住了很多稍纵即逝的机会。]\n3. 好处三：[...]\n\n我将通过 [例如：每天留出半小时不被打扰的“慢时间”，或每周挑战一项新技能来满足我的“快”需求] 来更好地尊重我的节奏。"></textarea>
            </section>
        </main>
    </div>

    <script>
        // 使用 'DOMContentLoaded' 事件确保在操作DOM之前，所有HTML元素都已加载完毕。
        document.addEventListener('DOMContentLoaded', () => {
            const rhythmSelector = document.querySelector('.rhythm-selector');
            
            // 检查节奏选择器元素是否存在，以避免在其他页面（如果没有此元素）上运行时出错。
            if (rhythmSelector) {
                const buttons = rhythmSelector.querySelectorAll('.rhythm-selector__button');
                
                // 使用事件委托，在父元素上监听点击事件，提高性能。
                rhythmSelector.addEventListener('click', (event) => {
                    // event.target 可能是按钮内的图标或文字，使用 closest 找到被点击的按钮本身。
                    const clickedButton = event.target.closest('.rhythm-selector__button');
                    
                    // 如果点击的不是按钮，则不执行任何操作。
                    if (!clickedButton) return;

                    // 遍历所有按钮，重置它们的状态。
                    buttons.forEach(button => {
                        button.classList.remove('selected');
                        button.setAttribute('aria-checked', 'false'); // 更新ARIA属性，对屏幕阅读器友好
                    });

                    // 为被点击的按钮添加 'selected' 类以应用高亮样式。
                    clickedButton.classList.add('selected');
                    clickedButton.setAttribute('aria-checked', 'true'); // 更新ARIA属性
                });
            }

            // 为屏幕阅读器添加一个仅在视觉上隐藏的样式类
            // 这是一种标准的无障碍（a11y）实践
            const srOnlyStyle = document.createElement('style');
            srOnlyStyle.textContent = `
                .sr-only {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border-width: 0;
                }
            `;
            document.head.appendChild(srOnlyStyle);
        });
    </script>

</body>
</html>
